<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<!-- dean.edwards/2004 -->
<!-- keeping code tidy! -->
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
 <title>IE7 {CSS2: auto}</title>
 <meta http-equiv="content-type" content="text/html;charset=ISO-8859-1"/>
 <meta http-equiv="content-style-type" content="text/css"/>

 <!-- compliance patch for microsoft browsers -->
 <!--[if lt IE 7]>
 <script src="../ie7-standard-p.js" type="text/javascript"></script>
 <script src="../ie7-css3.js" type="text/javascript"></script>
 <![endif]-->

 <style type="text/css">
  table.singular tr:nth-child(3) {
   background: red;
  }
  table.singular2 tr:nth-child(0n+1) {
   background: green;
  }
  table.all tr:nth-child(1n+0) {
   background: orange;
  }
  table.all2 tr:nth-child(n+0) {
   background: blue;
  }
  table.all3 tr:nth-child(n) {
   background: red;
  }
  table.even tr:nth-child(even) {
   background: green;
  }
  table.odd tr:nth-child(odd) {
   background: orange;
  }
  p:nth-child(4n) {
   background: red;
  }
  p:nth-child(4n+1) {
   background: green;
  }
  p:nth-child(4n+2) {
   background: blue;
  }
  p:nth-child(4n+3) {
   background: orange;
  }
 </style>
</head>

<body>
 <script type="text/javascript" src="ie7-demo.js"></script>

 <h2>:nth-child(3) (selects third child)</h2>

 <table class="singular">
  <tr>
   <td>foofy</td>
  </tr>
  <tr>
   <td>foofy</td>
  </tr>
  <tr>
   <td>foofy</td>
  </tr>
  <tr>
   <td>foofy</td>
  </tr>
 </table>

 <h2>:nth-child(0n+1) (selects first child)</h2>

 <table class="singular2">
  <tr>
   <td>foofy</td>
  </tr>
  <tr>
   <td>foofy</td>
  </tr>
  <tr>
   <td>foofy</td>
  </tr>
  <tr>
   <td>foofy</td>
  </tr>
 </table>

 <h2>:nth-child(1n+0) (selects all)</h2>

 <table class="all">
  <tr>
   <td>foofy</td>
  </tr>
  <tr>
   <td>foofy</td>
  </tr>
  <tr>
   <td>foofy</td>
  </tr>
  <tr>
   <td>foofy</td>
  </tr>
 </table>

 <h2>:nth-child(n+0) (selects all)</h2>

 <table class="all2">
  <tr>
   <td>foofy</td>
  </tr>
  <tr>
   <td>foofy</td>
  </tr>
  <tr>
   <td>foofy</td>
  </tr>
  <tr>
   <td>foofy</td>
  </tr>
 </table>

 <h2>:nth-child(n) (selects all)</h2>

 <table class="all3">
  <tr>
   <td>foofy</td>
  </tr>
  <tr>
   <td>foofy</td>
  </tr>
  <tr>
   <td>foofy</td>
  </tr>
  <tr>
   <td>foofy</td>
  </tr>
 </table>

 <h2>:nth-child(even) (also tests ':nth-child(2n)')</h2>

 <table class="even">
  <tr>
   <td>foofy</td>
  </tr>
  <tr>
   <td>foofy</td>
  </tr>
  <tr>
   <td>foofy</td>
  </tr>
  <tr>
   <td>foofy</td>
  </tr>
 </table>

 <h2>:nth-child(odd) (also tests ':nth-child(2n+1)')</h2>

 <table class="odd">
  <tr>
   <td>foofy</td>
  </tr>
  <tr>
   <td>foofy</td>
  </tr>
  <tr>
   <td>foofy</td>
  </tr>
  <tr>
   <td>foofy</td>
  </tr>
 </table>

 <div>
  <p>This should be green</p>
  <p>This should be blue</p>
  <p>This should be orange</p>
  <p>This should be red</p>
 </div>
</body>
</html>
